<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'demo2.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
	<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
  </head>

<body>
	<div class="panel-demo">
		<div class="panel panel-default">
			<div class="panel-heading">this is head</div>
			<div class="panel-body">
				<div id="tip-window" style="width:270px;height:180px;border:1px solid #CDCDCD;">
					<div id="tip-toolbar" style="width:100%;height:33px;line-height:33px;padding: 0 5px;background: #F2F2F2;border-bottom:1px solid #CDCDCD;">
						<div style="float: left;"><b>今日头条</b></div>
						<div style="float: right;">
							<a href="javascript:$('#tip-window').fadeOut(500);" style="color: black;">关闭</a>
						</div>
					</div>
					<div id="tip-content" style="margin:10px;padding-bottom:10px;border-bottom:1px dashed #CDCDCD;">
						<div id="title">
							<a href="#"><b>码农与农民工 真正的区别</b></a>
						</div>
						<div id="title-content" style="margin-top:5px;color: gray;">
							农民工可以技术基本更新很少、码农每三年就更新下技术，刚刚熟练上手尼玛又要学习新技术！
						</div>
					</div>
					<div id="tip-bottom" style="float:right;padding:0 5px 10px 0;">
						<a href="#">查看»</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div id="tip-window" style="position:fixed;right:10px;bottom:10px;;width:270px;height:180px;border:1px solid #CDCDCD;">
		<div id="tip-toolbar" style="width:100%;height:33px;line-height:33px;padding: 0 5px;background: #F2F2F2;border-bottom:1px solid #CDCDCD;">
			<div style="float: left;"><b>今日头条</b></div>
			<div style="float: right;">
				<a href="javascript:$('#tip-window').fadeOut(500);" style="color: black;">关闭</a>
			</div>
		</div>
		<div id="tip-content" style="margin:10px;padding-bottom:10px;border-bottom:1px dashed #CDCDCD;">
			<div id="title">
				<a href="#"><b>码农与农民工 真正的区别</b></a>
			</div>
			<div id="title-content" style="margin-top:5px;color: gray;">
				农民工可以技术基本更新很少、码农每三年就更新下技术，刚刚熟练上手尼玛又要学习新技术！
			</div>
		</div>
		<div id="tip-bottom" style="float:right;padding:0 5px 10px 0;">
			<a href="#">查看»</a>
		</div>
	</div>
	
	<!-- 模态框测试   -->
	<!-- <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	  Launch demo modal
	</button> -->
	<button class="btn btn-warning btn-lg" onclick="showModal();">showModalTest</button>

	<!-- Modal -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
	      </div>
	      <div class="modal-body">
	        ...
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	        <button type="button" class="btn btn-primary">Save changes</button>
	      </div>
	    </div>
	  </div>
	</div>
	
	<button class="btn btn-primary" data-toggle="modal" data-target=".bs-modal-sm">Small modal</button>

<div class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>
	<!-- 模态框测试结束   -->
	<script type="text/javascript">
		function showModal(){
			$("#myModal").modal("show");
		}
	</script>
</body>
</html>
